<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="资产选择列表" width="1000px" :height="600" @ok="handleSubmit">
    <BasicTable @register="registerTable" :rowSelection="rowSelection" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref, toRaw } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { columns, searchFormSchema } from './AssetInfo.data';
  import { list } from '@/views/asset/asset-info/AssetInfo.api';
  // 声明Emits
  const emit = defineEmits(['select', 'register']);
  const checkedKeys = ref<Array<string | number>>([]);
  const [registerModal, { setModalProps, closeModal }] = useModalInner(() => {
    reload();
  });
  const props = defineProps({
    queryParam: { type: Object, default: () => ({}) },
  });
  //注册table数据
  const [registerTable, { getSelectRows, reload }] = useTable({
    api: list,
    beforeFetch: (params) => {
      return Object.assign(params, { column: 'createTime', order: 'desc', ...props.queryParam });
    },
    rowKey: 'id',
    columns,
    formConfig: {
      labelWidth: 80,
      schemas: searchFormSchema,
      baseRowStyle: { maxHeight: '20px' },
      autoSubmitOnEnter: true,
    },
    striped: true,
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
  });
  /**
   * 选择列配置
   */
  const rowSelection: any = {
    type: 'checkbox',
    columnWidth: 50,
    selectedRowKeys: checkedKeys,
    onChange: onSelectChange,
  };
  /**
   * 选择事件
   */
  function onSelectChange(selectedRowKeys: (string | number)[]) {
    checkedKeys.value = selectedRowKeys;
  }

  //提交事件
  function handleSubmit() {
    setModalProps({ confirmLoading: true });
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('select', { data: getSelectRows(), id: toRaw(unref(checkedKeys)) });

    setModalProps({ confirmLoading: false });
  }
</script>
